<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todo List</title>
</head>
<body>
    <div id="root"></div>
    <script src="./vue3基础源码/vue3.js"></script>
    <script>

        const inputFn = () => {
            const {ref} = Vue;
            let inputValue = ref("");
            
            return {inputValue};
        }

        const toList = () => {
            const {reactive} = Vue;
            
            const list = reactive([]);
            const handleClick = (val) => {
                list.push(val);
                val = '';
            }
            return {handleClick,list};
        }


        const app = Vue.createApp({
            setup(props,context){
                let {inputValue} = inputFn();
                
                const {handleClick,list} = toList();

                return {inputValue,handleClick,list};
                
            },
            template:`
                    <input v-model="inputValue" />
                    <button @click="handleClick(inputValue)">提交</button>
                    <ul>
                        <li v-for="(item,index) in list" :key="index">{{item}}</li>
                    </ul>
                    `
        });



        const vm = app.mount("#root");
    </script>
</body>
</html>